<template>
	
	<view class="track flex--col" v-else>
		<Loading v-if="loading">正在努力加载中...</Loading>
		<template v-else>
			<RealtimePosition></RealtimePosition>
			<view class="track-record">
				<RecordPanel 
							:partnerInfo="partnerInfo"
							:curSpot="curSpot"
							:travelingRoute="travelingRoute" 
							@stopTravel="stopTravel"
							@recordSpot="handleRecordSpot"></RecordPanel>
			</view>
			<view class="track-map">
				<LocationMap  
							  :height="90"
							  :userPosition="blind"
							  :volunteerPosition="volunteer"
							  :locatePosition="locatePosition"
							  :attractionPositions="travelingRoute.attractionsList"
							  >
				</LocationMap>
			</view>
		</template>
		
	</view>
</template>

<script>
	import RealtimePosition from "@/components/RealtimePosition/RealtimePosition.vue"
	import RecordPanel from "./components/RecordPanel.vue"
	import LocationMap from "@/components/LocationMap/LocationMap.vue"
	import Loading from "@/components/Loading/Loading.vue"
	import * as TravelingApi from "@/api/traveling/traveling.js"
	import * as Role from "@/core/constant/role.js"
	import * as WS from "@/core/constant/WebSocketEvent.js"
	import {getDistance} from "@/utils/geo.js"
	import * as Travel from "@/core/constant/travel.js"
	import { checkRole, navToTravel } from "@/core/app.js"
    import {REFERSH_TRAVEL_TIMER,REFRESH_PERSONALCARD } from "@/core/constant/event"
	
	
	export default {
		components:{
			RecordPanel,
			LocationMap,
			Loading
		},
		data(){
			return {
				travelingRoute:{},
				travel:{},
				blind:{},
				volunteer:{},
				curSpot:-1,
				loading:true
			}
		},
		computed:{
			locatePosition(){
				console.log(this.blind)
				if(checkRole() === Role.ROLE_BLIND){
					return this.blind
				}
				else{
					return this.volunteer
				}
			},
			partnerInfo(){
				const role = checkRole()
				if(role === Role.ROLE_BLIND){
					return this.volunteer
				}else{
					return this.blind
				}
			}
		},
		methods:{
			/**
			 * 处理点击打卡
			 * @param {Object} index
			 */
			async handleRecordSpot(index){
				const {travelAttractionsId} = this.travelingRoute.attractionsList[index]
				await this.makeSpotRecord(travelAttractionsId)
				await this.getTravelingRoute()
			},
			/**
			 * 处理按照定位打卡
			 */
			handleDistanceRecordSpot(){
				if(this.curSpot+1 >= this.travelingRoute.attractionsList.length){
					return
				}
				const nextAttraction = this.travelingRoute.attractionsList[this.curSpot+1]
				
				let distance = 1000000
				if(this.role === Role.ROLE_BLIND){
					 distance = getDistance(nextAttraction.pointY,nextAttraction.pointX,this.blind.pointY,this.blind.pointX)
				}else{
					distance = getDistance(nextAttraction.pointY,nextAttraction.pointX,this.volunteer.pointY,this.volunteer.pointX)
				}
				
				if(distance < 1000){
					this.curSpot += 1
					this.makeSpotRecord()
				}
			},
			/**
			 * 刷新景点列表
			 */
			async getTravelingRoute(){
				this.travelingRoute =  await TravelingApi.travelingRoute(this.travel.travelId)
			
				let curSpotIndex = this.curSpot
				for(curSpotIndex;curSpotIndex+1<this.travelingRoute.attractionsList.length;curSpotIndex++){
					if(this.travelingRoute.attractionsList[curSpotIndex+1].recordTime === null){
						break
					}
				}
				this.curSpot = curSpotIndex
			},
			/**
			 * 打卡
			 * @param {Object} travelAttractionsId
			 */
			async makeSpotRecord(travelAttractionsId){
				return await TravelingApi.recordSpot(travelAttractionsId)
			},
			/**
			 * 结束出行
			 */
			async stopTravel(){
				try{
					await TravelingApi.stopTravel(this.travel.travelId)
					this.handleStopTravel()
				}catch(error){
					this.$error(error.errMsg)
				}
			},
			/**
			 * 
			 * 结束出行的业务逻辑
			 */
			handleStopTravel(){
				this.$store.dispatch("travel/setCurrentTravelStatus",Travel.TRAVEL_DONE)
				this.$store.dispatch("socket/closeHeartBeatFn")
				uni.$emit(REFERSH_TRAVEL_TIMER)
				uni.$emit(REFRESH_PERSONALCARD)
				navToTravel()
			},
			/**
			 * 心跳的回调函数：刷新定位 + 定位打卡
			 * @param {Object} data
			 */
			handleHeartBeat(data){
				this.blind.pointX = data.userPointX 
				this.blind.pointY = data.userPointY
				this.volunteer.pointX = data.volunteerPointX
				this.volunteer.pointY = data.volunteerPointY
				this.handleDistanceRecordSpot()
			},
			initData(){
				const travel = this.$store.getters.currentTravel
				
				const role = checkRole()

				this.volunteer = {
						name: travel.name2,
						id:travel.volunteerId,
						pointX:0,pointY:0,
						phone:travel.volunteerPhone,
						img:travel.volunteerAvatar
						}
				this.blind = {
						name: travel.name,
						id:travel.userId,
						pointX:0,pointY:0,
						phone:travel.userPhone,
						img:travel.userAvatar
						}
				this.travel = travel
				
				uni.$on(WS.FORTHWITH_ASSIST_RECORD,this.getTravelingRoute)
			},
			initSocket(){
				this.$store.dispatch("socket/openSocket")
				this.$store.dispatch("socket/startHeartBeatFn",{userId:this.blind.id,volunteerId:this.volunteer.id})
				this.$store.dispatch("socket/regHeartBeatCallback",this.handleHeartBeat.bind(this))
				uni.$on(WS.FORTHWITH_ASSIST_STOPTRAVEL,this.handleStopTravel)
			}
		},
		async onLoad(options){
			this.travelId = options.travelId
			this.initData()
			this.initSocket()
			await this.getTravelingRoute()
			this.loading = false
		},
		onUnload(){
			this.$store.dispatch("socket/closeSocket")
		}
		
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
		width:100%;
	}
	
	
	.track{
		width:600rpx;
		overflow: scroll;
		position: relative;
		margin: auto;
		align-items: flex-start;
		gap:24px;
		
		scroll-snap-type: y mandatory;
	}
	
	.track-record,.track-map{
		width:100%;
		scroll-snap-stop: always;
		scroll-snap-align: start;
	}
	
	.track-map{
		height:1200rpx;
	}
	
</style>